<template>
	<view class="hourly-rainfall">
		<view class="title_tag">
			<view>站点类型</view> 
			<view>叶畈水库</view> 
			<view>2/23 ~ 2/27</view>
		</view>  
		<custom-tab :list="list" :currentItem="tabCurrentItem" @tab-click="onTabClick"></custom-tab>
		<view class="chart_box" id="todayChart"></view>
		<uni-section title="监测数据" type="line">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="150">监测时间</uni-th> 
					<uni-th align="center"  width="150">雨量(mm)</uni-th> 
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" width="150">{{ item.date }}</uni-td> 
					<uni-td align="center" width="150">{{ item.hyetal }}</uni-td> 
				</uni-tr>
			</uni-table>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				loading: false,
				list: [ "主坝雨量", "中心岛雨量","上游雨量"],
				tabCurrentItem: "主坝雨量",
				tableData: [
					{ date: "2024/2/23 09:54", hyetal: "0.35" },
					{ date: "2024/2/23 09:54", hyetal: 15.2 },
					{ date: "2024/2/23 09:54", hyetal: 0 },
					{ date: "2024/2/23 09:54", hyetal: 0 },
					{ date: "2024/2/23 09:54", hyetal: 7.34 },
					{ date: "2024/2/23 09:54", hyetal: "0.44" },
					{ date: "2024/2/23 09:54", hyetal: 0 },
					{ date: "2024/2/23 09:54", hyetal: 0 },
					{ date: "2024/2/23 09:54", hyetal: 0 },
					{ date: "2024/2/23 09:54", hyetal: 16.3 },
				],
			}
		},
		mounted() {
			this.initLine();
		},
		methods: {
			onTabClick(item) {
				console.log('Clicked tab:', item); 
				this.tabCurrentItem = item;
			},
			getRandomValue(min, max, decimal) {
				return parseFloat((Math.random() * (max - min) + min).toFixed(decimal));
			},
			initLine() {
				let _this = this;
				var chartDom = document.getElementById("todayChart");
				var chart = _this.$echarts.init(chartDom);
				chart.clear();
				chart.resize();   
				var xData =['00:00','02:00','04:00','06:00','08:00','10:00','12:00',
				'14:00','16:00','18:00','20:00','22:00','24:00']  
				var tq2 = [];
				for (let i = 1; i < 14; i++) { 
					tq2.push(_this.getRandomValue(0, 16.7)); 
				};
				let day = this.generateUniqueRandomNumbers(21, 30); 
				day.forEach(item => {
					tq2[item] = 0; 
				}) 
				var option = {  
					legend: {
						data: ["逐时雨量"],
						x: "right",
						top: "2%"
					},
					grid: {
						top: '16%',
						left: '5%',
						right: '8%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: 'category', 
						axisTick: {
							show: false,
						},
						axisLabel: {
							color: '#3a3a3a' 
						},
						splitLine: {
							show: false
						},
						axisLine: { 
							lineStyle: {
								color: '#b9b9b9'
							}, 
						},
						boundaryGap: false,
						data: xData
					}],

					yAxis: [{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type:'dashed',//虚线
								color: '#dcdcdc', 
							}
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							margin: 20,
							textStyle: {
								color: '#3a3a3a',
							},
						},
						axisTick: {
							show: false,
						},
					}],
					series: [ {
							name:'逐时雨量',
							type: 'line',
							showAllSymbol: true,
							symbol: 'circle',
							symbolSize: 5,
							smooth: true,
							lineStyle: {
								normal: {
									color: "#4A6CFD",
								},
							},
							label: {
								show: false, 
							},
							itemStyle: {
								color: "#4A6CFD",
								borderColor: "#4A6CFD",
								borderWidth: 2,
							},
							areaStyle: {
								normal: {
									color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: 'rgba(74,108,253,0.3)'
										},
										{
											offset: 1,
											color: 'rgba(74,108,253,0)'
										}
									], false),
								}
							},
							data:tq2 
						},
					]
				}
				chart.setOption(option);

			},
			generateUniqueRandomNumbers(count, max) {
				const uniqueNumbers = new Set();

				while(uniqueNumbers.size < count) {
					const randomNumber = Math.floor(Math.random() * max) + 1;
					uniqueNumbers.add(randomNumber);
				}

				return Array.from(uniqueNumbers);
			}
		}
	}
</script>

<style lang="scss">
.chart_box{
	height: 16rem;
	width: 100%;
}
.title_tag{
	display: flex;
	justify-content: space-around;
	font-size: 0.9rem;
	padding: 0.4rem 0;
}
.uni-section{
	background: unset !important; 
	padding: 0 0.8rem 0.8rem;
}
/deep/ .uni-section-header{
	padding-left: 0 !important;
}

</style>
